<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">

    <link rel="stylesheet" th:href="@{/plugins/editor.md/css/editormd.min.css}">

    <link rel="stylesheet" th:href="@{/plugins/selectize/css/selectize.default.css}">

    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/plugins/select2/css/select2.min.css}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}">

    <!-- SweetAlert2 -->
    <link rel="stylesheet" th:href="@{/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css}">

    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
</head>
<body class="hold-transition layout-top-nav">


<!-- Site wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
        <div class="container-fluid pl-5 pr-5">
            <a href="dashboard.html" class="navbar-brand">
                <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">ZengZK's Blog</span>
            </a>

            <button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse order-3" id="navbarCollapse">
                <!-- Left navbar links -->
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a th:href="@{/admin/dashboard}" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/admin/blog-mgr}" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            博客管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/admin/type-mgr}" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            分类管理
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- /.navbar -->

    <div class="container-fluid pl-5 pr-5 mt-3">
        <form id="blogForm" th:action="@{/admin/addBlog}" method="post" enctype="multipart/form-data">
            <!-- /.card-body -->
            <div class="card card-teal card-outline">
                <div class="card-header">
                    <h3 class="card-title">博客信息</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <label for="name" class="input-group-text">标题</label>
                                    </div>
                                    <!-- /btn-group -->
                                    <input th:value="${blog.name}" type="text" class="form-control" id="name"
                                           name="name" placeholder="博客标题(必填, 30字内)..."
                                           maxlength="30">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <!-- radio -->
                            <div class="form-group clearfix">
                                <div class="icheck-default d-inline-block">
                                    <input type="radio" id="original" name="creationType" value="原创" checked="checked">
                                    <label for="original">原创</label>
                                </div>
                                <div class="icheck-default d-inline-block ml-3">
                                    <input type="radio" id="reprinted" name="creationType" value="转载">
                                    <label for="reprinted">转载</label>
                                </div>
                                <div class="icheck-default d-inline-block ml-3">
                                    <input type="radio" id="translated" name="creationType" value="翻译">
                                    <label for="translated">翻译</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <!--                需要数据-->
                                <label for="categoryId">分类</label>
                                <select id="categoryId" name="categoryId" class="select picker show-tick form-control"
                                        data-placeholder="选择分类(必选)...."
                                        style="width: 100%;">
                                    <option></option>
                                    <option th:each="type :${types}" th:text="${type.name}" th:value="${type.id}">前端
                                    </option>
                                </select>
                            </div>

                            <!-- /.form-group -->
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>提示信息</label>
                            <h3 th:text="${msg ==null?'':msg}" style="color: red"></h3>
                            <!-- /.form-group -->
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>

                    <!--  value的用处
                    <select >
                    <option value = "A">B</option>
                    </select>

                    其中“A”“B”有何区别，各自代表什么意思？
                    答案：

                    B是显示在网页上的内容
                    A是实际传给后台表单处理程序-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <!--                需要数据-->
                                <label for="description">博客描述</label>
                                <textarea th:text="${blog.description}" class="form-control" rows="5" id="description"
                                          name="description"
                                          placeholder="博客描述（必填, 200字内）..."
                                          maxlength="200" style="resize:none"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-2">
                            <div class="icheck-default float-left">
                                <input type="checkbox" id="recommend" name="recommend">
                                <label for="recommend">推荐</label>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <!--              提交数据部分-->
                            <button id="publishBtn" type="submit" class="btn btn-sm btn-success float-right">
                                <i class="fa fa-edit"></i>
                                发布
                            </button>
                            <button id="saveBtn" type="submit" class="btn btn-sm btn-dark float-right mr-1">
                                <i class="fa fa-save"></i>
                                保存
                            </button>
                            <!--              目前不弄-->
                            <!--              <button type="button" class="btn btn-sm btn-primary float-right mr-1" data-toggle="modal"-->
                            <!--                      data-target="#addCategoryModal">-->
                            <!--                <i class="fa fa-plus"></i>-->
                            <!--                分类-->
                            <!--              </button>-->
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>

            <!-- /.card-body -->
            <div id="editormd" class="form-group mb-3">
                <!--        输入数据部分-->
                <textarea name="content" th:text="${blog.content}"></textarea>
            </div>
            <!--是否发布-->
            <input type="hidden" id="isPublish" name="isPublish">
            <input type="hidden" id="blogId" name="blogId" th:value="${blog.id}">
        </form>
    </div>
</div>
<!-- ./wrapper -->


<!--<div class="modal fade" id="addCategoryModal">-->
<!--  <div class="modal-dialog modal-lg">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <h4 class="modal-title">新增标签</h4>-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--          <span aria-hidden="true">&times;</span>-->
<!--        </button>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <input type="text" id="categoryInput" name="category" value="前端,后台">-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>-->
<!--        <button id="addCategoryBtn" type="button" class="btn btn-success">新增</button>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--  </div>-->
<!--  &lt;!&ndash; /.modal-dialog &ndash;&gt;-->
<!--</div>-->
<!-- /.modal -->


<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>

<!-- SweetAlert2 -->
<script th:src="@{/plugins/sweetalert2/sweetalert2.min.js}"></script>

<script th:src="@{/plugins/editor.md/js/editormd.min.js}"></script>

<!-- Select2 -->
<script th:src="@{/plugins/select2/js/select2.full.min.js}"></script>

<script th:src="@{/plugins/selectize/js/standalone/selectize.min.js}"></script>

<script th:src="@{/js/edit.js}"></script>
<!--<script th:src="@{/js/categoryinput.init.js}"></script>-->
<!--<script th:src="@{/js/taginput.init.js}"></script>-->
<script type="text/javascript">
    $(function () {
        /**
         * 初始化分类输入框
         */
        $('#categoryInput').selectize({
            create: true,
            createOnBlur: true,
            maxItems: 10
        });

        /**
         * 新增分类按钮事件
         */
        // $('#addCategoryBtn').on('click', function () {
        //   alert($('#categoryInput').val().split(','));
        // });
    });
</script>
<script type="text/javascript">


</script>
</body>
</html>